
<template>
<div id="viewuser">

<!--这是修改的弹出框-->
<el-dialog
        title="请填写修改的信息"
        :visible.sync="updateTag1"
        :close-on-click-modal="false" top="50px">

        <el-form lalel-width="100px"
        >
        
        
            <el-form-item label="用户名称" >
                <el-input v-model="UpdateUser.username" autocomplete="off"></el-input>
            </el-form-item>


             <el-form-item label="用户密码" >
                <el-input v-model="UpdateUser.password" show-password></el-input>
            </el-form-item>

            <el-form-item label="真实姓名">
                <el-input v-model="UpdateUser.realname" ></el-input>
            </el-form-item>

           <el-form-item label="性别">
                <el-radio-group v-model="UpdateUser.sex">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>

             <el-form-item label="联系电话" >
                <el-input v-model="UpdateUser.studentphone" ></el-input>
            </el-form-item>

            

            <el-form-item label="出生日期">
                <el-date-picker v-model="UpdateUser.birthday" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>

       

             <el-form-item label="是否启用">
                <el-radio-group v-model="UpdateUser.status">
                    <el-radio label="启用">启用</el-radio>
                    <el-radio label="禁用">禁用</el-radio>
                </el-radio-group>
            </el-form-item>

              

            

        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="no()">取 消</el-button>
            <el-button type="primary" @click="change()">确 定</el-button>
        </span>
        </el-dialog>










         
<!--这是添加的弹出框-->
<el-dialog
        title="请填写新用户信息"
        :visible.sync="updateTag"
        :close-on-click-modal="false" top="10px">

        <el-form lalel-width="100px"
        >
        <el-form-item label="头像">
               <el-upload
                    class="avatar-uploader"
                    action="http://localhost:9090/user/uploadImg"
                    :show-file-list="false"
                    :on-success="handleSuccess"
                    name="img"
                    >
                    <img v-if="NewUser.img" :src="this.$imgHost+NewUser.img" class="avatar"  style="width:100px;">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    
                    </el-upload>
            </el-form-item>
        
            <el-form-item label="用户名称" >
                <el-input v-model="NewUser.username" autocomplete="off"></el-input>
            </el-form-item>


             <el-form-item label="用户密码" >
                <el-input v-model="NewUser.password" show-password></el-input>
            </el-form-item>

            <el-form-item label="真实姓名">
                <el-input v-model="NewUser.realname" ></el-input>
            </el-form-item>

           <el-form-item label="性别">
                <el-radio-group v-model="NewUser.sex">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>

             <el-form-item label="联系电话" >
                <el-input v-model="NewUser.studentphone" ></el-input>
            </el-form-item>

            

            <el-form-item label="出生日期">
                <el-date-picker v-model="NewUser.birthday" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>

       

             <el-form-item label="是否启用">
                <el-radio-group v-model="NewUser.status">
                    <el-radio label="启用">启用</el-radio>
                    <el-radio label="禁用">禁用</el-radio>
                </el-radio-group>
            </el-form-item>

               <el-form-item label="用户身份">
                <template>
                      <el-select   v-model="NewUser.role" >
                            <el-option :label="学生" :value="NewUser.role1">  </el-option>
                            <el-option :label="宿管" :value="NewUser.role2">  </el-option>
                      </el-select>
</template>
            </el-form-item>

            

        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="updateTag = false">取 消</el-button>
            <el-button type="primary" @click="addUser()">确 定</el-button>
        </span>
        </el-dialog>



<el-row>
  <el-col :span="4">
    
         <el-input placeholder="请输入用户名" v-model="username" style="width:250px;font-size:23px;height:38px;" class="input-with-select">
               
          </el-input> 
          
   
    </el-col>

    <el-col :span="3">
    
        <el-button   type="primary" plain  @click="findUser()">搜索</el-button>
          
   
    </el-col>

<el-col :span="3">
    
        <el-button   type="primary"  @click="up()">新增用户</el-button>
          
   
    </el-col>
    

</el-row>

<!--这是表格-->
<el-row>
  <el-table
    :header-cell-style="{ textAlign: 'center', backgroundColor: '#f5f7fa' }"
    :data="pagination.records"
    style="width: 1500px;">

    <el-table-column
      label="编号"
      prop="userid"
      align="center"
      width="100">
    </el-table-column>


    <el-table-column
      label="头像"
      width="100"
      align="center">
      <template slot-scope="scope">
      
         <el-image
      style="width: 70px; height: 70px"
      :src="$imgHost+scope.row.img"
      fit="fill">
      </el-image>

      </template>

    </el-table-column>

    <el-table-column
      label="用户名"
      prop="username"
      align="center"
      width="180">
    </el-table-column>

    <el-table-column
      label="姓名"
      prop="realname"
      align="center"
      width="200">
    </el-table-column>

    <el-table-column
      label="联系电话"
      prop="studentphone"
      align="center"
      width="200">
    </el-table-column>

    <el-table-column
      label="性别"
      prop="sex"
      align="center"
      width="150">
    </el-table-column>

    <el-table-column
      label="出生日期"
      prop="birthday"
      align="center"
      width="250">
    </el-table-column>

    <el-table-column
      label="用户状态"
      
      align="center"
     
      width="220">

      <template slot-scope="scope">
              <span v-if="scope.row.status==='启用'" style="color: green;font-size:21px;">启用</span>
              <span v-else-if="scope.row.status==='禁用'" style="color: red;font-size:21px;">禁用</span>
      </template>
    </el-table-column>


   

    <el-table-column label="操作"
    width="100"
    align="center"
   
    >
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="success"
          @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        
      </template>
    </el-table-column>
  </el-table>

        <!--分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.current"
            :page-size="pagination.size"
            :page-sizes="[2,3,4,5]"
           
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            style="margin-top:50px;">
        </el-pagination>
</el-row>


         
</div>
</template>
<script>
  export default {
    data() {

      return {
         
           NewUser:{
              username:'',
              password:'',
              realname:'',
              studentphone:'',
              sex:'男',
              birthday:'',
              img:'',
              status:'启用',
              role:'学生',
              role1:'学生',
              role2:'宿管',

           },
           username:'',
		 		   pagination:{},
		 		   updateTag:false,
           updateTag1:false,

           UpdateUser:{
              userId:'',
              username:'',
              password:'',
              realname:'',
              sex:'',
              studentphone:'',             
              birthday:'',              
              status:'',
           },
           
      };
    },
    methods: {

          no(){
                this.updateTag1 = false;
                this.findUser();
          },

          //修改资料 
          change(){
                      var url="user/changeUser";
                     
                      this.$axios.post(url,this.UpdateUser).then(resp=>{

                        

                      if(resp.data.tag==false){
                         this.$message({message:resp.data.message
                                                ,duration:5000
                                                ,offset:150
                                                ,showClose: true
                                                ,type:'error'});

                         

                        
  
                      }else{
                        
                      this.updateTag1 = false;
                      this.findUser();
                        //提示修改成功
                        this.$message({message:'修改成功。'
                                                ,duration:5000
                                                ,offset:150
                                                ,showClose: true
                                                ,type:'success'});
                      }

   });



          }
          ,
        



      //点击修改，弹出框
      handleEdit(index,row){
           this.updateTag1 = true;

          this.UpdateUser =row;
           console.log(this.UpdateUser);

      },



 //pageSize 改变时会触发回调参数每页条数
      handleSizeChange(size) {
                   this.findUser(this.pagination.current,size);	                  
      },
       //currentPage 改变时会触发 回调参数当前页
      handleCurrentChange(page) {

         this.findUser(page,this.pagination.size);
         
          
      },

       findUser(page=1,size=4){



                      var url="user/selectUser";
                      var params=new URLSearchParams();
                      params.append("username",this.username);
                      params.append("current",page);
                      params.append("size",size);
                      this.$axios.post(url,params).then(resp=>{
                      
                      this.pagination=resp.data;                      
          });

		 		  },
              //打开添加框
               up(){
                 this.updateTag=true;
     },

     //添加新用户
     addUser(){    


           

                      var url="user/addUser";
                      var params=new URLSearchParams();
                      params.append("username",this.NewUser.username);
                      params.append("password",this.NewUser.password);
                      params.append("realname",this.NewUser.realname);
                      params.append("studentphone",this.NewUser.studentphone);
                      params.append("sex",this.NewUser.sex);
                       params.append("birthday",this.NewUser.birthday);
                      params.append("img",this.NewUser.img);
                      params.append("status",this.NewUser.status);
                      params.append("role",this.NewUser.role);
                      
                     
                      this.$axios.post(url,params).then(resp=>{


                        //关闭弹框
                        this.updateTag  =false;



                         //刷新查询的数据
                        this.findUser();
                         
                        
                      });

     },

      //图片上传
        handleSuccess(resp,file,fileList){

            file.url=resp.data;

            this.NewUser.img=file.url;

          
            console.log(this.NewUser.img);
         
           
        },

    },

    

    mounted() {
      this.findUser();
    },
  };
</script>

<style scoped>
  #viewuser{
     margin-left: 50px;
    margin-top: 20px;
  }


</style>

<style>
  .el-row {
    margin-bottom: 20px;
 
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

